<!-- 及时送分类列表商品卡片 -->
<template>
    <view class="cardBox" @tap="toDetail">
        <u--image width="140rpx" height="140rpx" :src="item.image" mode="widthFix" />
		<view class="infoBox">
			<view class="title">
				{{item.storeName}}
			</view>
			<view class="sallBox">
				<view class="priceBox">
					<view class="nowPrice">
						<text class="unit">￥</text>
						<text class="money">{{item.price}}</text>
						<text class="moneyType">{{item.moneyType}}</text>
					</view>
					<view class="oldPrice">
						面价:￥{{item.otPrice}}
					</view>
				</view>
				<view class="iconBox">
                    <u-icon
                    	name="plus-circle-fill"
                    	color="#9F07B7"
                    	size="50rpx"
                    	@tap.native.stop="addCar($event)"
                    />
					<text v-if="item.cartNum" class="cartNum">{{item.cartNum}}</text>
				</view>
			</view>
		</view>
    </view>
</template>

<script>
    export default {
        name:"productCard",
		props: {
			item: Object
		},
        data() {
            return {
                
            };
        },
		methods: {
			addCar(event) {
                this.$emit('addToCar', this.item.id, this.item.cartNum ? this.item.cartNum + 1 : 1);
            },
            toDetail() {
            	// 跳转详情页
            	uni.navigateTo({
            	    url: '/pages/productDetail/productDetail?productData=' + JSON.stringify(this.item)
            	})
            }
		}
    }
</script>

<style lang="scss" scoped>
	.cardBox {
		margin: 40rpx 0;
		display: flex; 
        align-items: center;
		.infoBox {
            flex: 1;
			margin-left: 20rpx;
			.title {
				font-size: 28rpx;
				color: $uni-text-color-grey-6;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
			}
			.sallBox {
				margin-top: 20rpx;
				display: flex;
				justify-content: space-between;
				.priceBox {
					.nowPrice {
						color: $uni-text-color-money;
						font-weight: bold;
						.unit {
							font-family: DIN Alternate, DIN Alternate;
							font-size: 24rpx;
						}
						.money {
							font-family: DIN Alternate, DIN Alternate;
							font-size: 32rpx;
						}
						.moneyType {
							margin-left: 8rpx;
							font-size: 20rpx;
							font-weight: 500;
						}
					}
					.oldPrice {
						font-weight: 400;
						font-size: 22rpx;
						color: $uni-text-color-grey-6;
					}
				}
				
				.iconBox{
					margin-right: 20rpx;
					position: relative;
					.cartNum {
						width: 40rpx;
						height: 40rpx;
						text-align: center;
						line-height: 40rpx;
						border-radius: 50%;
						background-color: $uni-bg-color-addNum-bg;
						font-size: 28rpx;
						color: $uni-text-color-inverse;
						position: absolute;
						top: -20rpx;
						right: -20rpx;
					}
				}
			}
		}
	}
</style>